<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>modal模态框</title>
	<style type="text/css">
		html,body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}
		.click-btn {
			width: 50px;
			height: 30px;
			line-height: 30px;
			position: relative;
			left: 10px;
			top: 10px;
		}
		.modal {
			width: 100%;
			height: 100%;
			position: relative;
			display: none;
		}
		.modal .cover {
			width: 100%;
			height: 100%;
			background: #ccc;
		}
		.modal .main{
			width: 300px;
			border: 1px solid #666;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
		.main .modal-title {
			height: 30px;
			border-bottom: 1px solid #666;
		}
		.main .close {
			float: right;
			margin-right: 10px;
			cursor: pointer;
		}
		.main .modal-panel {
			height: 150px;
		}
		.main .modal-footer {
			float: right;
			margin-bottom: 10px;
			margin-right: 10px;
		}
		.main .btn {
			padding: 0 10px;
			cursor: pointer;
		}

	</style>
</head>
<body>
	<button class="click-btn">点我</button>
	<div class="modal">
		<div class="cover"></div>
		<div class="main">
			<div class="modal-title">
				<h3>这里是标题
					<span class="close cancle-btn">x</span>
				</h3>
			</div>
			<div class="modal-panel">
				<p>内容1</p>
				<p>内容2</p>
			</div>
			<div class="modal-footer">
				<span class="btn btn-cancle">取消</span>
				<span class="btn btn-confirm">确定</span>
			</div>
		</div>

		<script type="text/javascript">
			var click = document.querySelector(".click-btn"),
					modal = document.querySelector(".modal"),
			    close = document.querySelector(".close"),
			    cancle = document.querySelector(".btn-cancle");
			click.addEventListener("click",function(){
				showModal();
			})

			close.addEventListener("click",function(){
				hideModal();
			})
			
			cancle.addEventListener("click", function(){
				hideModal();
			})

			function showModal(){
				modal.style.display = 'block';
			}
			function hideModal(){
				modal.style.display = 'none';
			}
		</script>
		
	</div>

</body>
</html>